<template>
  <div class="goods-detail">
    <header-goods-detail
        @changePage="changePage"
        ref="header"
        :opacity="headerOpacity"
        :page="page"></header-goods-detail>
    <swiper
        :options="swiperOption"
        @slideChangeTransitionStart='slideChangeTransitionStart'
        ref="mySwiper"
        class="goods-swiper" v-if="detail">
      <swiper-slide>
        <goods-detail-main :detail="detail" @touchEnd="bannerLast" ref="page0" @scroll="scroll"
                           @moreEvaluateList="moreEvaluateList" @loadMore="changePage"></goods-detail-main>
      </swiper-slide>
      <swiper-slide>
        <goods-detail-desc :detail="detail.detail" ref="page1" @loadMore="changePage"></goods-detail-desc>
      </swiper-slide>
      <swiper-slide>
        <goods-detail-evaluate ref="page2" :id="detail.id" @loadMore="changePage"></goods-detail-evaluate>
      </swiper-slide>
    </swiper>
    <div class="loading-c">
      <loading v-if="!detail"></loading>
    </div>
    <div class="balance">
      <div class="left">
        <div class="panel">
          <i class="icon icon-headphones"></i>
          <div class="name">联系客服</div>
        </div>
        <div class="panel">
          <i class="icon icon-heart"></i>
          <div class="name">收 藏</div>
        </div>
        <div class="panel" @click="goShoppingCat">
          <i class="icon icon-cart"></i>
          <div class="name">购物车
            <mt-badge size="small" color="#f40" class="badge" v-if="shoppingCat.length">{{shoppingCat.length}}
            </mt-badge>
          </div>
        </div>
      </div>
      <div class="right">
        <mt-button type="default" class="submit" @click="updateShoppingCat">加入购物车</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
  import 'swiper/dist/css/swiper.css';
  import {swiper, swiperSlide} from 'vue-awesome-swiper';
  import {mapActions, mapGetters} from 'vuex';
  import server from '@/api/server/index';
  import {Toast} from 'mint-ui';
  import loading from '@/components/loading/loading';

  import headerGoodsDetail from '@/components/header/header-goods-detail';
  import GoodsDetailMain from '@/views/GoodsDetail/GoodsDetailMain';
  import GoodsDetailEvaluate from '@/views/GoodsDetail/GoodsDetailEvaluate';
  import GoodsDetailDesc from '@/views/GoodsDetail/GoodsDetailDesc';

  export default {
  	name:'keepAlive',
    data() {
      return {
        swiperOption: {
          direction: 'vertical'
        },
        detail: null,
        page: 0,
        opacity: 0,
      }
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      },
      ...mapGetters([
        'shoppingCat'
      ]),
      headerOpacity() {
        if (this.page === 0) {
          return this.opacity
        }
        return 1;
      }
    },
    mounted() {
      this.__init(this.$route.params.id);
    },
    methods: {
      ...mapActions({
        addShoppingCat: 'addShoppingCat'
      }),
      __init(id) {
        server.goodsDetail(id).then((rs) => {
          this.detail = rs;
        }).catch((ms) => {
          Toast(ms);
        });
      },
      scroll(y) {
        y = -y / 250;
        y = Math.min(1, y);
        y = Math.max(0, y);
        this.opacity = y;
      },
      changePage(page) {
        //this.swiper.params.direction = 'vertical';
        this.page = page;
        this.swiper.slideTo(page, 500, false);
        //this.swiper.params.direction = this.swiperOption.direction;
      },
      bannerLast() {
        this.changePage(1);
      },
      slideChangeTransitionStart() {
        this.page = this.swiper.activeIndex;
      },
      updateShoppingCat() {
        let params = {
          id: this.$route.params.id,
          title: this.detail.title,
          img: this.detail.thump,
          info: 'xl码',
          num: 1,
          price: this.detail.price,
          select: true
        };
        this.addShoppingCat(params).then((rs) => {
					Toast({
						message: '成功添加到购物车',
						iconClass: 'icon icon-checkmark1'
					});
        });
      },
      goShoppingCat() {
        this.$router.push({path: '/shoppingCat'});
      },
      moreEvaluateList() {
        this.changePage(2);
      }
    },
    components: {
      loading,
      swiper,
      swiperSlide,
      GoodsDetailMain,
      GoodsDetailEvaluate,
      GoodsDetailDesc,
      headerGoodsDetail
    }
  }
</script>

<style scoped lang="less">
  @import '../../common/less/variable';

  .goods-detail {
    background-color: @color-background;
    position: absolute;
    width: 100%;
    z-index: 51;
    top: 0;
    left: 0;
    bottom: 0;
    .goods-swiper {
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      bottom: 50px;
    }
    .balance {
      height: 50px;
      position: fixed;
      z-index: 52;
      left: 0;
      width: 100%;
      bottom: 0;
      background-color: #fff;
      display: flex;

      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      border-top: 1px solid @color-background;
      .left {
        flex: 1;
        display: flex;
        padding-left: 10px;
        .panel {
          flex: 1;
          text-align: center;
          padding: 0 5px;
          i {
            font-size: @font-size-medium-x;
          }
          .icon-cart {
            margin-left: -4px;
          }
          .name {
            position: relative;
            font-size: @font-size-small;
            margin-top: 2px;
            .badge {
              position: absolute;
              left: 42px;
              top: -25px;
            }
          }
        }
      }
      .right {
        width: 150px;
        .submit {
          box-sizing: border-box;
          width: 150px;
          height: 50px;
          border-radius: 0;
          box-shadow: none;
          font-size: @font-size-medium-x;
          background-color: @color-text-t;
          border-top: 1px solid @color-text-t;
          color: @color-text-w;
          font-weight: bold;
        }
      }
    }
    .loading-c {
      margin-top: 50%;
    }
  }
</style>
